<template >
  <div>
    <el-drawer
      modal-class="merak_modal"
      append-to-body
      :size="600"
      v-model="drawerIsShow"
      @opened="formDrawerOpenedFn"
      @closed="formDrawerClosedFn"
      @close="hideFormDrawerFn"
      title="I am the title"
      direction="rtl"
    >
      <template #header>
        <div class="merak_modal_title">
          {{
            form.type_id.value == "" ? $t("archive_set_goods_type.add_goods_type") : $t("archive_set_goods_type.edit_goods_type")
          }}
        </div>
      </template>

      <el-scrollbar height="100%">
        <el-form :model="form" label-position="top" :rules="rules" ref="goodsRuleFormRef">
          <el-form-item :label="form.type_name.label" prop="type_name.value">
            <el-input
              maxlength="100"
              class="qf_input"
              clearable
              v-model="form.type_name.value"
              :placeholder="form.type_name.placeholder"
            ></el-input>
          </el-form-item>
          <el-form-item :label="form.type_name_cn.label" prop="type_name_cn.value">
            <el-input
              maxlength="100"
              class="qf_input"
              clearable
              v-model="form.type_name_cn.value"
              :placeholder="form.type_name_cn.placeholder"
            ></el-input>
          </el-form-item>
          <el-form-item :label="form.type_name_en.label" prop="type_name_en.value">
            <el-input
              maxlength="100"
              class="qf_input"
              clearable
              v-model="form.type_name_en.value"
              :placeholder="form.type_name_en.placeholder"
            ></el-input>
          </el-form-item>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item :label="form.class_id.label" prop="class_id.value">
                <!-- 分组 -->
                <div class="class_group">
                  <el-select
                    class="qf_select"
                    clearable
                    filterable
                    v-model="form.class_id.value"
                    :placeholder="form.class_id.placeholder"
                  >
                    <el-option v-for="item in classIdOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button class="add_class_group" circle @click="addClassGroupFn">
                    <el-icon size="24"><CirclePlus /></el-icon>
                  </el-button>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="form.tag.label" prop="tag.value" :placeholder="form.tag.placeholder">
                <!-- 标签 -->
                <el-select class="qf_select" clearable v-model="form.tag.value" :placeholder="form.tag.placeholder">
                  <el-option v-for="item in tagOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item :label="form.unit.label" prop="unit.value">
                <el-input
                  maxlength="100"
                  class="qf_input"
                  clearable
                  v-model="form.unit.value"
                  :placeholder="form.unit.placeholder"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="form.unit_cn.label" prop="unit_cn.value">
                <el-input
                  maxlength="100"
                  class="qf_input"
                  clearable
                  v-model="form.unit_cn.value"
                  :placeholder="form.unit_cn.placeholder"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item :label="form.multi_unit.label" prop="multi_unit.value">
                <el-input
                  maxlength="100"
                  class="qf_input"
                  clearable
                  v-model="form.multi_unit.value"
                  :placeholder="form.multi_unit.placeholder"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="form.multi_unit_cn.label" prop="multi_unit_cn.value">
                <el-input
                  class="qf_input"
                  maxlength="100"
                  clearable
                  v-model="form.multi_unit_cn.value"
                  :placeholder="form.multi_unit_cn.placeholder"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item :label="form.has_gender.label" prop="has_gender.value">
                <!-- 有性别 -->
                <el-select class="qf_select" v-model="form.has_gender.value" :placeholder="form.has_color.placeholder">
                  <el-option v-for="item in hasOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="form.has_color.label" prop="has_color.value">
                <!-- 有颜色 -->
                <el-select class="qf_select" v-model="form.has_color.value" :placeholder="form.has_color.placeholder">
                  <el-option v-for="item in hasOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item :label="form.has_size.label" prop="has_size.value" :placeholder="form.has_size.placeholder">
                <!-- 有规格 -->
                <el-select class="qf_select" v-model="form.has_size.value" :placeholder="form.has_size.placeholder">
                  <el-option v-for="item in hasOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="form.package_type.show">
              <el-form-item
                :label="form.package_type.label"
                prop="package_type.value"
                :placeholder="form.package_type.placeholder"
              >
                <!-- 套装 -->
                <el-select
                  class="qf_select"
                  clearable
                  v-model="form.package_type.value"
                  :placeholder="form.package_type.placeholder"
                >
                  <el-option v-for="item in packageTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
           <!-- 条件：
       1. form.type_id.value 必须不为空；
       2. form.package_type.show 必须为true,form.package_type.show的结果依赖于form.has_size。
       3. form.size_prop_id和form.package_type.show都依赖于 form.has_size
        -->
     
          <el-row :gutter="40" v-show="form.type_id.value == '' ? false : true&&form.package_type.show">
            <el-col :span="12"> 
              <el-form-item :label="form.size_prop_id.label" prop="size_prop_id.value" :placeholder="form.size_prop_id.placeholder">
                <!-- 尺码/规格属性 -->
                <el-select class="qf_select" clearable v-model="form.size_prop_id.value" :placeholder="form.size_prop_id.placeholder">
                  <el-option v-for="item in sizePropId" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <el-button type="default" @click="hideFormDrawerFn">{{ $t("merak.cancel") }}</el-button>
        <el-button type="primary" @click="saveGoodsTypeFormFn">{{ $t("merak.save") }}</el-button>
      </template>
    </el-drawer>
  </div>
</template>


<script setup lang="ts" >
import { ref, inject, defineExpose, onMounted } from "vue";

const form = inject("goodsTypeFormData"); //注入是否表单数据
const rules = inject("rules"); //注入表单验证数据
const hasOptions = inject("hasOptions"); //注入是否select的 options数据
const packageTypeOptions = inject("packageTypeOptions");
const classIdOptions = inject("classIdOptions");
const tagOptions = inject("tagOptions");
const sizePropId = inject("sizePropId");
const drawerIsShow = inject("goodsTypeDrawerIsShow"); //注入是抽屉显示
const hideFormDrawerFn = inject("goodsTypeHideFormDrawerFn"); //注入关闭抽屉FN
const saveGoodsTypeFormFn = inject("saveGoodsTypeFormFn"); //注入保存表单FN
const formDrawerOpenedFn = inject("formDrawerOpenedFn"); //注入打开抽屉后FN
const formDrawerClosedFn = inject("formDrawerClosedFn"); //注入关闭抽屉后FN
const addClassGroupFn = inject("addClassGroupFn"); //注入关闭抽屉后FN
const formRef = inject("goodsTypeFormRef"); //注入组件实例数据(ele)

const goodsRuleFormRef = ref();

onMounted(() => {
  formRef.el = goodsRuleFormRef;
});

defineExpose({
  goodsRuleFormRef
});
</script>
             
<style lang="scss" scoped>
.class_group {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  .add_class_group{
    border: none;

  }
}
</style>